<template>
  <view class="product-info-block">
    <view class="product-info-header" @click="navigateToComment">
      <view class="title">
        {{ `商品评价(${commentSum})` }}
      </view>
      <view class="more-button">
        <view class="label">
          {{ `好评率${((comments?.positive_rate ?? 0) * 100).toFixed(2)}%` }}
        </view>
        <wd-icon name="arrow-right" size="24rpx" color="#999999" />
      </view>
    </view>
    <view class="divider" />
    <view v-if="tagList.length" class="comment-tag-list">
      <view
        v-for="(tag, index) in tagList.slice(0, 9)"
        :key="index"
        class="tag-item"
      >
        {{ `${tag.name}(${tag.count})` }}
      </view>
    </view>
    <view
      v-if="product.spu_comment_smart_summary_show_flag"
      class="comment-smart_summary"
    >
      <view class="comment-smart_summary-header">
        <v-icon size="36rpx" src="@/static/icons/comment-smart-summary.svg" />
        <view class="comment-smart_summary-header-text">
          智能评价总结
        </view>
      </view>
      <view class="comment-smart_summary-content">
        {{ product.spu_comment_smart_summary }}
      </view>
    </view>

    <template v-for="(item, index) in commentList" :key="index">
      <product-comment-content
        v-if="item.comment"
        :comment="item.comment"
        :my-comment="item.myComment"
      />
      <product-comment-group-content
        v-if="item.groupComment"
        :comment="item.groupComment"
      />
    </template>
  </view>
</template>

<script setup lang="ts">
import ProductCommentContent from './product-comment-content.vue';
import ProductCommentGroupContent from './product-comment-group-content.vue';
const props = defineProps<{
  product: SpuVO;
  comments?: SpuOrderCommentVO;
  commentGroupList?: SpuCommentGroupCommentOrderVO[];
}>();

const tagList = computed(() => {
  const list: { id?: string; name: string; count: number }[] = [];
  (props.comments?.comment_tags ?? [])
    .sort((a, b) => a.sort - b.sort)
    .forEach((tag) => {
      list.push({ id: tag.id, name: tag.tag_name, count: tag.tag_count });
    });
  (props.comments?.group_comment_tags ?? []).forEach((tag) => {
    const num = parseInt(tag.cnt);
    if (!isNaN(num) && num) {
      const item = list.find((item) => item.name === tag.tag_name);
      if (item) {
        item.count += num;
      } else {
        list.push({ name: tag.tag_name, count: num });
      }
    }
  });
  return list;
});
const commentList = computed(() => {
  const list: {
    time: string;
    comment?: SpuCommentVO;
    groupComment?: SpuCommentGroupCommentOrderVO;
    myComment?: boolean;
  }[] = [];
  props.comments?.comments?.forEach((comment) => {
    list.push({ time: comment.create_time, comment });
  });
  props.comments?.customer_comment?.forEach((comment) => {
    list.push({ time: comment.create_time, comment, myComment: true });
  });
  props.commentGroupList?.forEach((comment) => {
    list.push({ time: comment.comment_time, groupComment: comment });
  });
  return list
    .sort((a, b) => new Date(b.time).getTime() - new Date(a.time).getTime())
    .slice(0, 2);
});
const commentSum = computed(() => {
  const total = props.comments?.comment_sum ?? 0;
  return total > 9999 ? '1w+' : total;
});

const navigateToComment = () => {
  uni.navigateTo({
    url: `/pages/product/product-comment?id=${props.product.id}`
  });
};
</script>

<style lang="scss" scoped>
.product-info-block {
  position: relative;
  margin: 0 24rpx 24rpx;
  padding: 18rpx 24rpx;
  border-radius: 16rpx;
  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12rpx;

  .product-info-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50rpx;
    .title {
      font-size: 32rpx;
      font-weight: bold;
    }
    .more-button {
      display: flex;
      align-items: center;
      gap: 6rpx;
      .label {
        display: flex;
        font-size: 26rpx;
        color: #999999;
        flex-shrink: 0;
      }
    }
  }

  .divider {
    height: 1px;
    background-color: #eeeeee;
  }

  .comment-tag-list {
    margin-top: 12rpx;
    display: flex;
    gap: 8rpx 16rpx;
    flex-wrap: wrap;
    .tag-item {
      padding: 0 16rpx;
      border-radius: 16rpx;
      font-size: 26rpx;
      line-height: 50rpx;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      word-break: break-all;
      background: rgba(255, 47, 59, 0.1);
    }
  }

  .comment-smart_summary {
    box-sizing: border-box;
    background: linear-gradient(
      180deg,
      rgba(253, 191, 126, 0.1) 0%,
      rgba(255, 255, 255, 0) 100%
    );
    border: 1px solid #fdbf7e;
    border-radius: 16rpx;
    padding: 24rpx;
    margin-top: 20rpx;

    .comment-smart_summary-header {
      display: flex;
      gap: 12rpx;
      margin-bottom: 20rpx;
      .comment-smart_summary-header-text {
        font-style: normal;
        font-weight: 400;
        font-size: 26rpx;
        line-height: 34rpx;
        color: #7c4d19;
      }
    }
    .comment-smart_summary-content {
      font-size: 26rpx;
      line-height: 34rpx;
      word-break: break-all;
    }
  }

  .comment-item {
    margin-top: 24rpx;

    .comment-header {
      display: flex;
      align-items: center;
      gap: 16rpx;
      margin-bottom: 12rpx;
      .comment-user {
        font-size: 26rpx;
      }
    }
    .comment-content {
      font-size: 26rpx;
      line-height: 34rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-all;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      line-clamp: 2;
    }

    .comment-content-images {
      display: flex;
      flex-wrap: wrap;
      gap: 12rpx;
      margin-top: 24rpx;
      .v-image {
        border-radius: 16rpx;
      }
    }

    .comment-thumbs {
      font-size: 26rpx;
      margin-top: 12rpx;
      display: flex;
      justify-content: flex-end;
      gap: 6rpx;
      align-items: center;
    }
    .thumb {
      color: #ff2f3b;
    }
  }
}
</style>
